import * as THREE from "three";
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass';
let outlinePass: any;
let composer:any;
export default function heighlight() {
    let domContainer = document.getElementById("threeContainer");
    domContainer?.addEventListener("click", click);
    console.log('点击了描边');
    setEffect();
}
function click(event) {
    // 点击模型后再触发描边和屏闪效果
    outlinePass.selectedObjects = [window.meshObj];
    // 4.屏闪效果  GlitchPass通道
    const glitchPass = new GlitchPass();
    composer.addPass(glitchPass);
}
function setEffect() {
    // 1.
    // 指定了需要后处理的渲染器WebGLRenderer
    composer = new EffectComposer(window.renderer);
    // 指定后处理对应的相机camera和场景scene
    const renderPass = new RenderPass(window.threeScene, window.camera);
    // 给EffectComposer添加一个渲染器通道RenderPass
    composer.addPass(renderPass);

    // OutlinePass通道，可以给指定的某个模型对象添加一个高亮发光描边效果
    // 2.创建OutlinePass通道
    const v2 = new THREE.Vector2(window.innerWidth, window.innerHeight);
    outlinePass = new OutlinePass(v2, window.threeScene, window.camera);
    // 选择一个模型对象
    // outlinePass.selectedObjects = [window.meshObj];
    // 设置描边样式
    outlinePass.visibleEdgeColor.set(0xffff00);
    outlinePass.edgeThickness = 4;//描边厚度
    outlinePass.edgeStrength = 10;//发光强度
    outlinePass.pulsePeriod = 2;//模型闪烁频率控制，默认0不闪烁,设置呼吸闪烁
    composer.addPass(outlinePass);

    // 3.设置发光通道
    /**
        * UnrealBloomPass的参数
        * 1:辉光所覆盖的场景大小
        * 2：辉光的强度
        * 3：辉光散发的半径
        * 4：辉光的阈值（场景中的光强大于该值就会产生辉光效果）
        */
    // const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1,1.1,0.18);
    // bloomPass.renderToScreen = true;
    // composer.addPass(bloomPass);


    function render() {
        composer.render();
        requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧，window的方法大约每16.7ms调用一次requestAnimationFrame()方法指定的函数，实现渲染器渲染方法render()的周期性调用
    }
    render();
}